<template>
  <div class="popup">
    <!-- <button @click="liveFGn">离场</button> -->
    <van-search v-model="iptVal" show-action :placeholder="intPlachholder" @search="onSearch" @cancel="onCancel"
      @input="onInput()" />
    <HistoryHot v-if="blockShow==1" :historyKeywordList="historyKeywordList" :hotKeywordList="hotKeywordList"
      @tatClick="tatClick" />
    <MyList v-else-if="blockShow==2" :arr="ListArr" @cellClick="cellClick" />
    <Myproduct v-else :filterCategory="filterCategory" :goodsList="goodsList" @categoryChange="categoryChange"
      @priceChange="priceChange" />
  </div>
</template>

<script>
  import HistoryHot from '@/components/HistotyHot'
  import Myproduct from '@/components/Myproduct'
  import MyList from '@/components/MyList'
  import {
    GetPopupData,
    GetSearchData,
    GettimeData
  } from '@/request/api'
  export default {
    components: {
      HistoryHot,
      Myproduct,
      MyList
    },
    data() {
      return {
        iptVal: "",
        intPlachholder: "",
        //1代表历史记录与热门搜索区块
        //2代表列表区块
        //3代表产品区块
        blockShow: 1,
        //历史记录数据
        historyKeywordList: [],
        //热门搜索
        hotKeywordList: [],
        //传递给Myproduct组件的分类数据
        filterCategory: [],
        //传递给Myproduct组件的商品列表数据
        goodsList: [],
        //价格排序
        order: "desc",
        //分类的ID
        categoryId: 1005000,
        //排序的方式
        sort: "id",
        //List数组的数组
        ListArr: []
      };
    },
    computed: {},
    watch: {},
    methods: {
      categoryChange(value) {
        console.log(value);
        this.categoryId = value;
        //调用onSearch搜索方法
        this.onSearch();
      },
      priceChange(val) {
        console.log(val);
        this.order = val;
        this.sort = "price";
        this.onSearch();
      },
      //搜索
      onSearch() {
        let that = this;
        //搜索请求
        GetSearchData({
          keyword: that.iptVal,
          order: that.order, //价格排序
          page: 1,
          size: 20,
          categoryId: that.categoryId,
          sort: that.sort
        }).then(res => {
          if (res.errno == 0) {
            console.log(res)
            //跳转去产品区块
            that.blockShow = 3;
            console.log(that.blockShow)
            let {
              filterCategory,
              goodsList
            } = res.data;
            let arr = JSON.parse(JSON.stringify(filterCategory).replace(/name/g, 'text').replace(/id/g, 'value'))
            that.filterCategory = arr;
            that.goodsList = goodsList;

          }
          console.log(that.filterCategory);
        })
      },
      //实施搜索
      onInput() {
        let that = this;
        //显示列表区块
        that.blockShow = 2;
        //发送请求
        GettimeData({
          keyword: that.iptVal
        }).then(res => {
          if (res.errno == 0) {
            that.ListArr = res.data
          }
        })
      },
      //取消
      onCancel() {
        //跳转上一个页面
        this.$router.go(-1)
      },
      //历史记录标签的搜索
      tatClick(val) {
        console.log(val)
        this.iptVal = val;
        this.onSearch();
      },
      //实时搜索的点击标签搜索
      cellClick(val) {
        this.iptVal = val;
        this.onSearch();
      }
    },
    created() {
      GetPopupData().then(res => {
        console.log(res);
        if (res.errno == 0) {
          let {
            defaultKeyword,
            historyKeywordList,
            hotKeywordList
          } = res.data;
          this.intPlachholder = defaultKeyword.keyword;
          this.historyKeywordList = historyKeywordList;
          this.hotKeywordList = hotKeywordList;
        }
      })
    },
    mounted() {}
  }
</script>
<style lang="less" scoped>
  .popup {
    width: 100%;
    position: absolute;
    top: 0;
    background: #efefef;
  }
</style>
